<template>
    <div id="Trolley">
        <van-row>
            <van-field v-model="baseUrl" label="小车IP地址" placeholder="请输入小车的IP地址"/>
        </van-row>
        <van-row style="margin-top: 20px">
            <van-col span="24">
                <!--@mousedown.native   //调原生事件按下-->
                <!--@mouseup.native //调原生事件弹起-->
                <van-button plain type="primary" size="normal"
                            @touchstart.native="handleRocker('up')"
                            @touchend.native="handleRocker('stop')"
                            @mousedown.native="handleRocker('up')"
                            @mouseup.native="handleRocker('stop')">前
                </van-button>
            </van-col>
        </van-row>
        <van-row style="margin-top: 30px">
            <van-col span="24">
                <van-button plain type="primary" size="normal"
                            @touchstart.native="handleRocker('left')"
                            @touchend.native="handleRocker('stop')"
                            @mouseup.native="handleRocker('left')"
                            @mousedown.native="handleRocker('stop')">左
                </van-button>
                <van-button plain type="primary" size="normal" style="margin-left: 30px" @click="handleStop">停止
                </van-button>
                <van-button plain type="primary" size="normal" style="margin-left: 30px"
                            @touchstart.native="handleRocker('right')"
                            @touchend.native="handleRocker('stop')"
                            @mouseup.native="handleRocker('right')"
                            @mousedown.native="handleRocker('stop')">右
                </van-button>
            </van-col>
        </van-row>
        <van-row style="margin-top: 30px">
            <van-col span="24">
                <van-button plain type="primary" size="normal"
                            @touchstart.native="handleRocker('down')"
                            @touchend.native="handleRocker('stop')"
                            @mousedown.native="handleRocker('down')"
                            @mouseup.native="handleRocker('stop')">后
                </van-button>
            </van-col>
        </van-row>
        <van-row style="margin-top: 30px">
            <van-col span="24">
                <van-button plain type="primary" size="normal" @click="handleChangeMode(0)">遥控</van-button>
                <van-button plain type="primary" size="normal" @click="handleChangeMode(1)"
                            style="margin-left: 30px">自动
                </van-button>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    //阻止手机端浏览器长按弹出菜单
    document.oncontextmenu = function (e) {
        e.preventDefault();
    };
    export default {
        name: 'Trolly',
        data() {
            return {
                baseUrl: "http://192.168.0.102",
                value: 0,
            }
        },
        methods: {
            handleRocker(val) {
                console.log(val);
                this.$axios.get(this.baseUrl + "/rocker?angle=" + val).then(
                    response => {
                        console.log("请求成功了3", response.data);
                    },
                    error => {
                        console.log("请求失败了3", error.message)
                    }
                )
            },
            handleStop() {
                console.log("stop");
                this.$axios.get(this.baseUrl + "/rocker?angle=stop").then(
                    response => {
                        console.log("请求成功了3", response.data);
                    },
                    error => {
                        console.log("请求失败了3", error.message)
                    }
                )
            },
            handleChangeMode(val) {
                // console.log(val);
                this.$axios.get(this.baseUrl + "/changeMode?modeId=" + val).then(
                    response => {
                        console.log("请求成功了3", response.data);
                    },
                    error => {
                        console.log("请求失败了3", error.message)
                    }
                )
            }
        }
    }

</script>

<style>
    #Trolley {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 30px;
    }

    .custom-button {
        width: 50px;
        color: #fff;
        font-size: 10px;
        line-height: 30px;
        text-align: center;
        background-color: #ee0a24;
        border-radius: 100px;
    }

    /*阻止手机端浏览器长按弹出菜单*/
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>